<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>管理员登录界面</title>
    <link rel="stylesheet" href="__CSS__/layui.css" />
    <script type="text/javascript" src="__JS__/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="__JS__/3.1.1/layer.js"></script>
    <script type="text/javascript" src="__JS__/layui.js"></script>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        label{
            color: white;
        }
    </style>
</head>
<body background="__IMAGE__/admin_login.jpg" style="background-size: 100%" >
<form class="" action="">
    <h1 style="margin-left:45%;margin-top:-20%">管理员登录</h1>
    <div class="layui-form-item  layui-col-md12">
        <label class="layui-form-label">用户名：</label>
        <div class="layui-input-block">
            <input type="text" name="user" placeholder="请输入账号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-col-md12">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-block">
            <input type="password" placeholder="请输入密码" name="psd" class="layui-input">
        </div>
    </div>
    <form class="" action="">
        <div class="layui-form-item  layui-col-md12 ">
            <label class="layui-form-label" >验证码：</label>
            <div class=" layui-col-md4">
                <input type="text" name="captcha" placeholder="点击右边图标更换"class="layui-input">
            </div>
            <img src="{:captcha_src()}" id="img" style="margin-left: 2%;width: 100px; height: 40px">
            <button type="button" onclick="f5()" class="layui-btn" style="margin-left: 88%;margin-top:-13%"><i class="layui-icon layui-icon-refresh-3"></i> </button>
        </div>
        <div class="layui-form-item layui-col-md12">
            <div class="layui-input-block">
                <input type="button" name="login" class="layui-btn layui-btn-fluid  layui-btn-radius"  value="登录" />
            </div>
            <div class="layui-input-block">
                <a href="{:url('find/zhao')}">  <input type="button" class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius" style="margin-top: 2%"  value="忘记密码"/> </a>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('input[name=login]').click(function () {
                var user=$('input[name=user]').val();
                var psd=$('input[name=psd]').val();
                var captcha=$('input[name=captcha]').val();
                if (user==""){
                    layer.msg('账号为空');
                    return false;
                }
                if (psd==""){
                    layer.msg('密码为空');
                    return false;
                }
                if (captcha==""){
                    layer.msg('验证码为空');
                    return false;
                }
                $.ajax({
                    type:"POST",//提交方式
                    url:"login",//提交地址
                    data:{
                        user:user,
                        psd:psd,
                        captcha:captcha
                    },//提交数据
                    dataType:'json',//返回格式
                    success:function (data) {
                        if (data.res==1){
                            layer.msg(data.msg,{time:1000},function () {
                                $("img").attr('src',"/captcha.html?"+Math.random());
                            });
                        }
                        if (data.res==2){
                            layer.msg(data.msg,{time:1000},function () {
                                window.location.href="../Admin/test";
                            });
                        }
                        if (data.res==3){
                            layer.msg(data.msg,{time:1000},function () {
                                history.go(0);
                            });
                        }
                    }
                })
            })
        })
        function f5() {                          //随即验证码生成
            $("img").attr('src',"/captcha.html?"+Math.random());
        }
    </script>
</body>
</html>